<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蓝焰测试3</title>
    <link href="assets/site3.css" rel="styleheet" type="text3/css" />
    <link href="assets/css/fontawesome-free-5.15.4-desktop" rel="styleheet" type="text3/css"/>
    <link href="assets/media.css" rel="styleheet" type="text3/css" />
<!--这是在runoob里的bootstrap安装使用里复制粘贴过来的-->
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/twitter-bootstrap/4.6.1/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/popper.js/2.11.2/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/twitter-bootstrap/4.6.1/js/bootstrap.min.js"></script>

<script src="assets/js/layer/layer.js"></script>
<!--老师用的：-- 新 Bootstrap5 核心 CSS 文件 -->
<link rel="stylesheet"
href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/twitter-bootstrap/5.1.3/css/bootstrap.min.css">

<!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/popper.js/2.11.2/umd/popper.min.js"></script>

<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script
src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/twitter-bootstrap/5.1.3/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
<script src="assets/js/jquery2-1.min.js"></script>
<script src="assets/js/jquery-jtemplates.js"></script>
<script src="assets/js/layer/layer.js"></script>
    <style type="test3/css">
        div{
            width: 100px;height: 50px;background-color: deepskyblue;
        }
    </style>

<!--第八次课堂增加 登录过程-->
<script>
    $(document).ready(function () {
        if(localStorage.getItem("loginFlag")==null){
                $("#areaInit").hshow();
                $("#areaLogined").hide();
                $("lbUserName").text("");
                $("loginedTxt").text("考生登录");
        }else{
                $("#areaInit").hide();
                $("#areaLogined").show();
                $("lbUserName").text(localStorage.getItem("userName"));
                $("loginedTxt").text("个人中心");
        }
        console.log(localStorage.getItem("loginFlag"));
        console.log(localStorage.getItem("userName"));
        //获取当前浏览器窗口中的地址栏中的地址
        var currentUrl=window.location.href;
        //hello world中找he，返回
        //判断地址中是否包含导航对应的板块名称，indexOf用来查找是否包含子串，如果有则返回子串的首字母位置索引
        if(currentUrl.indexOf("home")>=0){
        //给当前板块的导航项添加一个名为active的class
            $(".home").addClass("active");
        }
        if(currentUrl.indexOf("zsgg")>=0){
            $(".zsgg").addClass("active");
        }
    //$(".playAreaTitle").click(function () {
    //$(".playAreaContent").slideToggle(5000, function () {
    // console.log("完成");
    // });
    // })
    //访问获取新闻标题列表的接口
    $.ajax({
                url:"http://kjxycode.zisu.edu.cn/InterfaceCommonForNews/GetNewsTitleList",
                data:{token:"kjxy_Interface_2025"},
                type:"post",
                dataType:"json",
                success:function(e){
                     // 设置模板
                     $("#ulNewsTitleList").setTemplateURL("assets/templates/defaultNews.html");
                    // 处理模板
                    $("#ulNewsTitleList").processTemplate(e);
                    // var newsTitleList=e.newsTitleList;
                    // var htmlStr="";
                    // for(var i=0;i<20;i++){
                    //     htmlStr+="<li>";
                    //     htmlStr+="<span class='lbNewsTitle'>";
                    //     htmlStr+="<a href='#'>"+newsTitleList[i].newsTitle+"</a>";
                    //     htmlStr+="</span>";
                    //     htmlStr+="<span class='lbNewsOther'>";
                    //     htmlStr+="<span class='lbNewsClickNum'>"+newsTitleList[i].newsClickNum+" | </span>";
                    //     htmlStr+="<span class='lbNewsTime'>2025-04-23</span>";
                    //     htmlStr+="</span>";
                    //     htmlStr+="</li>";                        
                    // }
                    // $("#ulNewsTitleList").html(htmlStr);
                }
            })
    $("#btnExit").click(function(){
                localStorage.clear();
                window.location.reload();
    })
    $("#formLogin").submit(function(){
            //利用ajax的方式提交表单里的数据
            //复制粘贴了这一段ajax到register里那里再进彳亍修改
        $.ajax({
                //见runoob的jQuery教程
                "ur1":"http://kjxycode.zisu.edu.cn/InterfaceCommonForUser/CheckUserLogin",
                "type":"post",
                "data":{
                    "userPhone":$("#tbPhone").val(),
                    "userPWD":$("#tbPWD").val(),
                    //"code":$("#tbCode").val()//400表示系统有异常 学习通课程里有个资料 接口文档下载...ForUser查看
                    "token":"kjxy_Interface_2025"
                },
                "dataType":"json",
                success:function(e){
                    //e为返回值//
                //console.log(e);//
                if(e.status==600){
                layer.alert(e.username+"登录成功！",{icon:6});
                $("#areaInit").hide();
                $("#areaLogined").show();
                $("lbUserName").text("e.userName");
                $("loginedTxt").text("个人中心");
                localStorage.setItem("loginFlag",true);
                localStorage.setItem("userName",e.userName);  
                }else{
                    layer.alert("登录失败【"+e.status+"】【"+e.msg+"】",{icon:5});
                }
            }
        });
            //阻止当前表单自身的提交行为
        return false;
            })
        })
</script>
</head>
<body>
<!--这是最顶部LOGO区域和导航区域得四类-->
    <div class="nav-bar">
        <div class="nav">
        <div class="logo">
            <img src="assets/img/WEB第二次课堂用1.jpg" style="width:400px;" />
        </div>
    </div>
    <div class="nav-items">
<u1>
    <li><a class="home" href="default.html?area=home">首页得斯嘞</a></li>
    <li><a class="zsgg" href="default.html?area=zsgg">招生得斯嘞</a></li>
    <li><a class="bkzn" href="default.html?area=bkzn">指南得斯嘞</a></li>
    <li><a class="zysx" href="default.html?area=zysx">事项得斯嘞</a></li>
    <li><a class="bgxz" href="default.html?area=bgxz">表格得斯嘞</a></li>
    <li><a class="lxzb" href="index.html" target=""_blank>联招得斯嘞</a></li>
    //<li><a class="lxzb" href="default.html?area=lxzb">联招得斯嘞</a></li>
</u1>
</div>
</div>
<div style="width: 100%;height: 100px;"></div>
<!--banner区域得斯类-->

<!--这是从runoob网站的bootstrap4轮播复制粘贴并修改所得-->
<div id="demo" class="carousel slide" data-ride="carousel">
    <!-- 指示符 -->
    <ul class="carousel-indicators">
      <li data-target="#demo" data-slide-to="0" class="active"></li>
      <li data-target="#demo" data-slide-to="1"></li>
      <li data-target="#demo" data-slide-to="2"></li>
    </ul>
    <!-- 轮播图片 -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="assets/img/logo第一次用.jpg.jpg">
      </div>
      <div class="carousel-item">
        <img src="assets/img/WEB第二次课堂用1.jpg">
      </div>
      <div class="carousel-item">
        <img src="assets/img/第三次课堂用.jpg">
      </div>
      <div class="carousel-item">
        <img src="assets/img/第四次课堂用.jpg">
      </div>
    </div>
    <!-- 左右切换按钮 -->
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
      <span class="carousel-control-next-icon"></span>
    </a>
  </div>


<div class="banner">
    <div class="bannerTxt">
        蓝焰の最叼网页别喷喷就是你对
    </div>
</div>
</div>
<!--主要内容得斯类-->
<div class="mainContainer">
    <div class="newsArea"></div>
    <div class="newsAreaTitle"></div>
    <div class="txt">焦点の新闻</div>
    <div class="link">
        <a href="#">摩多摩多~&gt;&gt;</a>
    </div>
        <div class="newsListArea">
            <ul id="ulNewsTitleList">
            </ul>
        </div>
    </div>
    <div class="playArea">
    <div class="playAreaTitle">
        <div id="loginedTxt" class="txt">考生の登录</div>
    </div>
    <div>
        <div id="areaInit" class="playAreaContent"></div>
        //form id="formLogin" action="#" method="post"></form>//
        <form id="formLogin" action="http://www.baidu.com/s" method="post">
    <div>
        <div>手机号！</div>
    </div>
    <input id="tbPhone" type="text" name="tbName" placeholder="请输入手机号"/>
    </div>
    <div>密码拿来捏：</div>
    <div>
        <input id="tbPWD" type="password" name="tbPwd" />
    </div>
    <div>验证码也拿来捏：</div>
    <div>
        <input id="tbCode" type="text" name="tbCode" />
        <img src="assets/img/第四次课堂用.jpg">
    </div>
    <div>
    <button type="button">
        我要注册啊喂可恶啊！！！
    </button>
<button>
    我要登录啊喂(#`O′)！
    </button>
    </div>
    <div>
    </form>
    <div id="areaLogined" class="playAreaContent hide">
        <div>
            欢迎您：<spin id="IbUserName">xxx</spin>
            <button id="btnExit" type="button" class="btn btn-sm btn-success">退出</button>
            </div>
        <div><a href="#">进入个人中心</a>
        </div>
    <div class="linkArea">
    <i class="far fa-exclamation-circle fa-3x"></i>
    //《i class="fa fa-user-plus"></i>
</div>
    <div class="contactArea"></div>
</div>
</body>
</html>